/*
 * @Author: viivLgr
 * @Date: 2018-06-07 15:35:05
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-07 18:45:58
 */

import React from 'react';

import PageTitle from 'component/page-title/index.jsx';
import CategorySelector from './category-selector.jsx';

import Product from 'service/product-service.jsx';
import Util from 'util/util.jsx';

import './save.scss';

const _product = new Product();
const _util = new Util();

class ProductDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: this.props.match.params.pid,
            name: '',
            subtitle: '',
            categoryId: 0,
            parentCategoryId: 0,
            subImages: [],
            price: '',
            stock: '',
            detail: '',
            status: 1 // 商品状态1为在售
        }
    }
    componentDidMount() {
        this.loadDetail();
    }
    componentWillReceiveProps(nextProps) {
        let nextPId = nextProps.match.params.pid;
        let productIdChange = this.state.id !== nextPId;
        if (productIdChange) {
            this.setState({
                id: nextPId,
                name: '',
                subtitle: '',
                categoryId: 0,
                parentCategoryId: 0,
                subImages: [],
                price: '',
                stock: '',
                detail: '',
                status: 1 // 商品状态1为在售
            }, () => {
                this.loadDetail();
            });
        }
    }
    // 加载详情
    loadDetail() {
        if (this.state.id) {
            // 编辑功能，需要表单回填
            _product.getProduct(this.state.id).then(res => {
                let images = res.subImages.split(',');
                res.subImages = images.map((imgUri, index) => {
                    return {
                        uri: imgUri,
                        url: res.imageHost + imgUri
                    }
                });
                this.setState(res);
            }, errMsg => {
                _util.errorTips(errMsg);
            });
        }
    }
    render() {
        return (
            <div id="page-wrapper">
                <PageTitle title="商品详情" />
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品名称</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.name}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品描述</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.subtitle}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">所属分类</label>
                        <CategorySelector
                            readOnly
                            categoryId={this.state.categoryId}
                            parentCategoryId={this.state.parentCategoryId}
                            onCategoryChange={(categoryId, parentCategoryId) => this.onCategoryChange(categoryId, parentCategoryId)
                            }
                        />
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品价格</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control" readOnly
                                    value={this.state.price}
                                />
                                <span className="input-group-addon">元</span>
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品库存</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control" readOnly
                                    value={this.state.stock}
                                />
                                <span className="input-group-addon">件</span>
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品图片</label>
                        <div className="col-md-10">
                            {
                                this.state.subImages.length ? this.state.subImages.map((item, index) => (
                                    <div className="img-con" key={index}>
                                        <img src={item.url} />
                                    </div>
                                )) : (<div>暂无图片</div>)
                            }
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品详情</label>
                        <div className="col-md-10" dangerouslySetInnerHTML={{ __html: this.state.detail }}></div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ProductDetail;